iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
1
Modern Web

Vue 怎麼寫測試系列 第 9

Day 9. 聞風喪膽非同步,爽到忘我假回傳

  • 分享至 

  • xImage
  •  

Day 9.

文章好長; 不想讀

Moxios https://github.com/axios/moxios

正文

前端人員痛苦指數超高的一道門檻,處理非同步事件

光是聽名字就想放棄的朋友

你沒有朋友

老實點,去把他練好
這可能是今後唯一會給你 response 的東西了

嗚嗚嗚嗚嗚

update () {
    this.question.title = this.form.title;
    this.question.body = this.form.body;

    // 就是這邊
    axios.post('/questions/1', this.form)
        .then(({data}) => {
            this.feedback = true;
        });
    this.editing = false;
}

想這樣的東西,要怎麼測試?

莫非真的要發個 request 等 server 回傳?

當然不會,沒有朋友我們可以幻想一個
沒有 server 我們可以假造一個

moxios.stubRequest(/questions\/\d+/, {
    status: 200,
    response: {
        // title: 'Changed title',
        // body: 'Changed body'
    }
});

像這樣

moxios 會攔截 axios 所發出的 request, 然後判斷它要找的 url 而去回覆對應的結果。

說攔截好像有點難懂,實作大概就像這樣吧

axios.request = function(url) {
	return  moxios.pattern.match(url);
}

唯一要注意的是在使用之前
要記得幫 moxios 安裝和刪除就好


beforeEach (() => {
    moxios.install();
});

afterEach(() => {
    moxios.uninstall();
});

今天沒有影片君


上一篇
Day 8. 工具人的工具箱建置
下一篇
Day 10. Jest 原生的 mock
系列文
Vue 怎麼寫測試30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言